<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏特效</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .top {
        width: 100%;
        height: 70px;
        background-color: rgb(53, 11, 110);
    }

    .nav {
        width: 1200px;
        margin: auto;
        position: relative;
    }

    .nav ul {
        padding: 20px 40px;
        display: flex;
        background-color: rgb(115, 219, 219);
        justify-content: space-between;

    }

    .nav ul li {
        font-size: 20px;
        /* line-height: 70px; */
        text-align: center;
    }

    .nav ul li:hover {
        color: brown;
    }

    .nav ul .active {
        color: brown;
    }

    span {
        position: absolute;
        left: 40px;
        top: 0;
        width: 40px;
        height: 4px;
        background-color: brown;
        z-index: 555;
    }
</style>

<body>
    <div class="top">
        <div class="nav">
            <span></span>
            <ul>
                <li class="active">首页</li>
                <li>热点</li>
                <li>新闻</li>
                <li>文章</li>
                <li>视频</li>
                <li>更多</li>
            </ul>
        </div>
    </div>
</body>
<script src="js/animation.js"></script>
<script>
    var span = document.querySelector('span')
    var lis = document.querySelectorAll('.nav>ul>li')
    var ul = document.querySelectorAll('.nav>ul')



    // 整合 不懂 看下面
    var L = 40;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseenter = function(){
            getAnim(span, this.offsetLeft, 20,function(){
                this.onmouseout = function(){
                    getAnim(span, L, 20)
                }
            })
            this.onclick = function(){
                L = this.offsetLeft;
            }
        }
    }

    // console.log(span,lis);

    // 获取 初始位置
    // var L = 40;
    // for (var i = 0; i < lis.length; i++) {
    //     // 移入
    //     lis[i].onmouseover = function () {
 
    //         var dis = this.offsetLeft
    //         getAnim(span, dis, 20)

    //     }
    //     // 移开
    //     lis[i].onmouseout = function () {
    //         getAnim(span, L, 20)

    //     }
    //     // 点击 重置 初始位置
    //     lis[i].onclick = function () {
    //         L = this.offsetLeft

    //         document.querySelector('.active').classList.remove("active")
    //         this.classList.add('active')
    //     }
    // }

    
</script>

</html>